<template>
  <div class="person_wrap">
    <div class="person_left">
        <person-tree @sendWord="getWord" :df="88888" :treeList="treeList"
        @sendDepid="getDepId">

        </person-tree>
    </div>
    <div class="person_right">
        <person-list @sendTree="tosendInfo" @sendPage="getPage" :pList="perList"></person-list>

    </div>
  </div>
</template>

<script setup>
  import personTree from './components/personTree.vue'
  import personList from './components/personList.vue'
  import {getDepartment,getEmployeeList} from '../../api/person'
  import {ref,onMounted,reactive} from 'vue' 
  import {toTree} from '../../utils/tool'
  import mitt from '../../utils/mitt'
  let treeList=ref([]) //树形数据

  onMounted(()=>{
  
  })

  // 获取部门树形数据
  let getDepart=async ()=>{
    let res=await getDepartment()
    console.log(res)//获取的树形数据
    treeList.value=toTree(res)
    console.log(treeList.value,"-------------------")
  }
    getDepart();

  // 获取员工列表接口
 let perList=ref([])
 let total=ref(0)
let state=reactive({
    departmentId: 1, //部门id
    page:1,
    pagesize: 10,
    keyword: "" //搜素关键字
})
// 获取员工列表
  let getPerson=async ()=>{
    let res=await   getEmployeeList(state)
    console.log(res,"员工列表")
    perList.value=res.rows;
    total.value=res.total
  }
  getPerson();  
  // 子传父触发的事件函数 接收到页码
  let getPage=(page)=>{
      state.page=page;//改变当前页码
      getPerson();
  }
  // 子传父 搜索条件
  let getWord=(text)=>{
     state.keyword=text;
       getPerson();
  }
  // 接收子传父的部门id
  let getDepId=(id)=>{
    state.departmentId=id;
     getPerson();
  }
  //子传父 给详情组件传树形 
  let tosendInfo=()=>{
      // 任意组件传值
      mitt.emit("sendCas", treeList.value) //发送树形数据给详情
  }
</script>
<style lang="less" scoped>
    .person_wrap{
      width:100%;
      display: flex;
      .person_left{
        width:200px;
        border-left: 1px solid black;
      }
      .person_right{
        flex:1;
        margin-left: 20px;
      }
    }
</style>
